import { defineComponent } from 'vue';

const BreakText = defineComponent(
  props => {
    const renderText = () => {
      const list = props.text.split(' ');

      return list.map((item, index) => {
        if (index === list.length - 1) {
          return <span key={index}>{item}</span>;
        }
        return (
          <>
            <span key={index}>{item} </span>
            <br />
          </>
        );
      });
    };

    return () => {
      return <>{renderText()}</>;
    };
  },
  {
    props: {
      text: {
        type: String,
        default: ''
      }
    }
  }
);

export default BreakText;
